<template>
	<div :class="classes" :style="styles">
		<slot></slot>
	</div>
</template>
<script lang="ts">
	import Anes from "../base";
	import { Prop, Emit, Component, Watch, Mixins } from "vue-property-decorator";
	import { oneOf, findComponentsDownward } from "../../utils/assist";
	import Col from "./col.vue";

	const prefixCls = "ivu-row";
	@Component
	export default class Row extends Mixins(Anes) {
		@Prop({ default: "flex" }) type!: string;
		@Prop({
			type: String,
			default: "middle",
			validator(value) {
				return oneOf(value, ["top", "middle", "bottom"]);
			}
		})
		align!: string;
		@Prop({
			type: String,
			default: "start",
			validator(value) {
				return oneOf(value, [
					"start",
					"end",
					"center",
					"space-around",
					"space-between"
				]);
			}
		})
		justify!: string;
		@Prop({ default: 0 }) gutter!: number;
		@Prop() className!: string;

		get classes() {
			return [
				{
					[`${prefixCls}`]: !this.type,
					[`${prefixCls}-${this.type}`]: !!this.type,
					[`${prefixCls}-${this.type}-${this.align}`]: !!this.align,
					[`${prefixCls}-${this.type}-${this.justify}`]: !!this.justify,
					[`${this.className}`]: !!this.className
				}
			];
		}
		get styles() {
			let style = {};
			if (this.gutter !== 0) {
				style = {
					marginLeft: this.gutter / -2 + "px",
					marginRight: this.gutter / -2 + "px"
				};
			}

			return style;
		}

		updateGutter(val: number) {
			// 这里会嵌套寻找，把 Col 里的 Row 里的 Col 也找到，所以用 兄弟找
			// const Cols = findComponentsDownward(this, 'iCol');
			const Cols = findComponentsDownward<Col>(this, "Col");
			//	const Cols = findBrothersComponents(Col, "iCol", false);
			if (Cols.length) {
				Cols.forEach(child => {
					if (val !== 0) {
						child.gutter = val;
					}
				});
			}
		}

		@Watch("gutter")
		onGutter(val: number) {
			this.updateGutter(val);
		}
	}
</script>
